<!-- <div id="header" class="header-container"> -->
<div class="header">
    <div class="header-container">
        <div class="navbar-header">
            <div class="logo">
                <h1>
                    {notempty name="micro_config_data.long_logo"}
                    <img alt="{$micro_config_data.title}" src="{$micro_config_data.long_logo_original}">
                    {else/}
                    <img alt="{$muu_config_data.WEB_SITE_NAME}" src="{$muu_config_data.WEB_SITE_LOGO_ORIGIN}">
                    {/notempty}
                </h1>
            </div>
            <div class="navigation">
                <ul class="index-menu clearfix">
                    {if $navbar_count > 7}
                    {volist name="navbar" id="nav" key="key" offset="0" length="6"}
                    <li class="{eq name='nav.url|get_nav_active' value='1'}active{else/}{/eq}">
                        <a class="active-item text-ellipsis" title="{$nav.title}" href="{$nav.url|get_nav_url}"
                            target="{eq name='nav.target' value='1'}_blank{else/}_self{/eq}">
                            <span>{$nav.title}</span>
                        </a>
                    </li>
                    {/volist}
                    <li class="">
                        <a class="dropdown-toggle active-item" data-toggle="dropdown">
                            更多 <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            {volist name="navbar" id="nav" key="key" offset="6" length="999"}
                            <li>
                                <a class="active-item" title="{$nav.title}" href="{$nav.url|get_nav_url}"
                                    target="{eq name='nav.target' value='1'}_blank{else/}_self{/eq}">
                                    <span>{$nav.title}</span>
                                </a>
                            </li>
                            {/volist}
                        </ul>
                    </li>
                    {else/}
                    {volist name="navbar" id="nav" key="key"}
                    <li class="{eq name='nav.url|get_nav_active' value='1'}active{else/}{/eq}">
                        <a class="active-item-low text-ellipsis" title="{$nav.title}" href="{$nav.url|get_nav_url}"
                            target="{eq name='nav.target' value='1'}_blank{else/}_self{/eq}">
                            <span>{$nav.title}</span>
                        </a>
                    </li>
                    {/volist}
                    {/if}
                </ul>
            </div>
            <div class="attr-nav">
                <div class="search-header">
                    <i class="search-header-btn fa fa-search"></i>
                    <form action="{:url('index/Search/index')}" method="get" class="header-search-popup" role="form">
                        <div class="input-group input-control search-box has-icon-left">
                            <input type="text" class="form-control search-input" placeholder="请输入搜索关键字" name="keyword" value="{$keyword|default=''}">
                            <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">搜索</button>
                            </span>
                        </div>
                    </form>
                    <script>
                        $(function(){
                            $('.search-header-btn').click(function(e){
                                $('.header-search-popup').fadeToggle();
                            });
                        })
                    </script>
                </div>
                {if condition="is_login()"}
                <div class="information" >
                    <span class="information-quantity hidden">
                        
                    </span>
                    <a class="information-icon" data-remote="{:url('ucenter/message/modal')}" data-show-header="false" data-class-name="message-modal" data-toggle="modal">
                        <i class="iconfont">&#xe741;</i>
                    </a>
                </div>
                <div class="user-info">
                    <a class="dropdown-toggle dropdown-toggle-avatar" data-toggle="dropdown" role="button">
                        <img class="avatar img-circle" src="{$common_header_user.avatar64}"/>
                        <span class="nickname text-ellipsis">{$common_header_user.nickname}</span>
                    </a>
                    
                    <ul class="dropdown-menu " role="menu">
                        {volist name="user_nav" id="vo"}
                        <li>
                            <a href="{:get_nav_url($vo['url'])}"
                            target="{eq name='vo.target' value='1'}_blank{else/}_self{/eq}">
                                <span>{$vo.title}</span>
                            </a>
                        </li>
                        {/volist}
                        {if condition="check_auth('admin/Index/index')"}
                        <li>
                            <a href="{:url('admin/Index/index')}" target="_blank">
                                管理后台
                            </a>
                        </li>
                        {/if}
                        <li>
                            <a data-url="{:url('ucenter/Common/logout')}" event-node="logout">
                                退出
                            </a>
                        </li>
                    </ul>
                </div>
                <script>
                    $(function(){
                        // 获取未读消息数量
                        var url = '{:url("api/message/unread")}';
                        $.post(url, {
                            shopid : 0,
                        }, function (res) {
                            if(res.code == 200){
                                if(res.data.friendly_num == 0){
                                    $('.information-quantity').addClass('hidden');
                                }else{
                                    $('.information-quantity').removeClass('hidden');
                                    $('.information-quantity').text(res.data.friendly_num);
                                }
                            }
                        })
                    })
                </script>
                {else/}
                <ul class="no-login clearfix">
                    <li class="login verticalbar">
                        <!-- 弹框 -->
                        {if condition="$open_quick_login"}
                        <a data-login="quick_do_login" data-remote="{:url('ucenter/Common/quickLogin')}"
                        data-show-header="false" data-toggle="modal">登录</a>
                        {else/}
                        <!-- 单页 -->
                        <a data-login="do_login" href="{$login_url}">登录</a>
                        {/if}
                    </li>
                    <li class="registration">
                        <a data-role="do_register"
                        href="{:url('ucenter/Common/register',['forward'=> request()->url(true)])}">注册</a>
                    </li>
                </ul>
                {/if}
            </div>
        </div>
    </div>
</div>